<template>
  <v-app>
    <v-main class="fill-viewport">
      <v-container fluid fill-height class="h-100">
        <v-row justify="center" align="center" class="h-100">
          <v-col cols="12" md="10" lg="8" xl="6" class="h-100">
            <v-card class="elevation-10 h-100 d-flex flex-column" :style="{ 'background-image': `url(${backgroundImage})`, 'background-size': 'cover', 'background-position': 'center', 'color': 'black' }">
              <v-card-title class="text-h5 font-weight-bold justify-center">
                电力装备处理解决方案
              </v-card-title>
              <v-card-text class="flex-grow-1 d-flex flex-column" style="max-height: 20px;">
                <v-select
                    v-model="selectedLevel"
                    :items="levels"
                    label="选择您的评估等级"
                    variant="outlined"
                    color="primary"
                    style="color: black; background-color: rgba(255, 255, 255, 0.8);"
                ></v-select>

                <div v-if="selectedLevel" class="mt-4 pa-4 rounded" style="background-color: rgba(255, 255, 255, 0.9); color: black;">
                  <h3 class="text-h6 font-weight-bold mb-2">等级 {{ selectedLevel }} 建议</h3>
                  <p>{{ advice[selectedLevel] }}</p>
                </div>
                <div style="flex-shrink: 0;"></div> </v-card-text>
              <v-card-actions class="justify-center pa-4">
                <v-btn
                    color="success"
                    rounded="pill"
                    size="large"
                    @click="showCustomizationMessage"
                >
                  <v-icon left>mdi-account-wrench</v-icon>
                  私人定制方案
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import {ref} from 'vue';
import backgroundImage from '@/assets/images/login.jpg'; // 替换为您的新背景图片路径

const selectedLevel = ref(null);
const levels = ['A', 'B', 'C', 'D', 'E', 'F'];

const advice = {
  A: `您的电力装备评估等级为 A，表明设备状态极佳。建议继续保持当前卓越的维护措施，例如定期进行细致的检查、使用高质量的润滑剂以及严格遵守制造商的操作规程。同时，可以考虑引入更先进的预测性维护技术，通过实时数据分析提前发现潜在的微小问题，从而进一步延长设备的使用寿命并确保其持续高效运行。对于备件管理，维持合理的库存水平即可，无需过度储备。`,
  B: `您的电力装备评估等级为 B，设备处于良好状态但可能存在一些轻微的磨损。建议制定并严格执行详细的维护计划，及时处理任何已发现的小问题，避免其扩大化。可以考虑对关键部件进行性能升级，以提升设备的整体效率和可靠性。同时，加强对设备运行数据的监控，以便更好地了解设备的健康状况。对于维护人员，定期进行专业技能培训是很有必要的。`,
  C: `您的电力装备评估等级为 C，设备状态一般，可能存在较为明显的磨损或性能下降。建议立即进行一次全面的检查和维护，找出所有潜在的问题并进行修复。评估维修成本与更换成本的比例，制定合理的设备更新计划。在日常使用中，需要更加频繁地进行巡检，确保设备的安全运行。同时，开始考虑未来一到两年内的设备升级或更换方案。`,
  D: `您的电力装备评估等级为 D，设备状况较差，可能存在较为严重的故障隐患。建议立即停止非必要运行，并对设备进行彻底的故障排查和维修。仔细评估设备的剩余价值和维修的经济性，如果维修成本过高或设备老化严重，应考虑尽快更换。在此期间，务必加强安全管理，避免因设备问题引发事故。同时，着手研究新型号或替代方案。`,
  E: `您的电力装备评估等级为 E，设备状况非常糟糕，已接近或超出使用寿命。强烈建议立即停止使用该设备，并进行全面的安全检查，排除所有潜在的安全隐患。更换设备是目前最合适的选择。在选择新设备时，应充分考虑能效、可靠性和未来的维护成本。同时，需要按照环保规定对旧设备进行妥善处置。`,
  F: `您的电力装备评估等级为 F，设备已处于报废状态，存在极高的安全风险。必须立即停止运行并进行报废处理。切勿尝试继续使用，以免发生危险。在更换新设备时，务必选择符合最新标准和技术要求的型号，并建立完善的维护管理体系，以避免类似情况再次发生。同时，应总结经验教训，优化设备选型和使用策略。`,
};

const showCustomizationMessage = () => {
  alert('感谢您的选择，我们将尽快为您提供私人定制方案！');
  // 在实际应用中，您可以跳转到定制方案页面或触发其他操作
};
</script>

<style scoped>
.fill-viewport {
  min-height: 100vh;
}

.h-100 {
  height: 100%;
}





</style>